<template>
  <div>
    <div>我是数据管理Pinia页面</div>
    <div>{{ userStore.name }}</div>
    <div>{{ userStore.Name }}</div>
    <div>
      <button @click="updteUserName">我是更新名称</button>
      <button @click="handleUpdteUserName">我是调用方法</button>
    </div>
  </div>
</template>

<script setup lang="ts" name="PiniaHome">
import useUserStore from "@/stores/useUserStore";
/**
 * 使用 user 数据管理
 */
const userStore = useUserStore();
console.log("我要打印的值:", "userStore", userStore);
/**
 * 订阅数据仓库的数据更新
 */
userStore.$subscribe(
  (mutations, state) => {
    console.log("我要打印的值:我是订阅", "mutations", mutations);
    console.log("我要打印的值:我是订阅", "state", state);
  },
  { detached: true }, // 组件销毁不会删除，再次进入重新订阅，导致订阅多次
);
/**
 * 订阅方法更新
 *  */
userStore.$onAction(
  ({
    name, // action 的名字
    store, // store 实例
    args, // 调用这个 action 的参数
    after, // 在这个 action 执行完毕之后，执行这个函数
    onError, // 在这个 action 抛出异常的时候，执行这个函数
  }) => {
    // 记录开始的时间变量
    const startTime = Date.now();
    // 这将在 `store` 上的操作执行之前触发
    console.log(`Start "${name}" with params [${args.join(", ")}].`);

    // 如果 action 成功并且完全运行后，after 将触发。
    // 它将等待任何返回的 promise
    after((result) => {
      console.log(
        `Finished "${name}" after ${
          Date.now() - startTime
        }ms.\nResult: ${result}.`,
      );
    });

    // 如果 action 抛出或返回 Promise.reject ，onError 将触发
    onError((error) => {
      console.warn(
        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`,
      );
    });
  },
);
/**
 * 更新用户名称
 */
const updteUserName = () => {
    //  只触发 数据更新订阅
  userStore.$state.name = "hanmeimei" + Math.random();
};
/**
 * 调用 数据仓库 的方法 更新数据
 */
const handleUpdteUserName = () => {
    // 触发所有订阅，事件订阅和 数据订阅
  userStore.updateName("liming" + Math.random());
};
</script>

<style scoped></style>
